<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <link rel="stylesheet" href="./resoures/element-ui/index.css">
<!--    <link type="text/css" rel="stylesheet" href="../css/classifcation.css">-->
    <link type="text/css" rel="stylesheet" href="./css/classifcation.css">
    <!-- //引入vue.js -->
<!--    <script src="../resoures/vue.js"></script>-->
    <script src="./resoures/vue.js"></script>
    <!-- import JavaScript -->
<!--    <script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
    <script src="./resoures/element-ui/index.js"></script>
    <!-- 引入axios -->
<!--    <script src="../resoures/axios.min.js"></script>-->
    <script src="./resoures/axios.min.js"></script>
    <!-- 引入vue路由 -->
    <!--  <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>-->
</head>
<body>
<div id="app">
    <div class="indexHead">

        <div class="catalogueLogo">
            <img src="./img/logo.png" height="70px">

        </div>
        <div class="title">
            网上书城
        </div>
        <div class="indexHeadText" >
            <a href="/index.html" class="indexHeadTextA">首页</a>
            <a href="/bookClassification" class="indexHeadTextA" >图书分类 </a>
            <a href="/" class="indexHeadTextA" v-if="!login">免费注册</a>
            <a href="/" class="indexHeadTextA" v-if="!login">请先登录</a>
            <a href="/shoping.html" class="indexHeadTextA" v-if="login">购物车</a>
            <a href="/order.html" class="indexHeadTextA" v-if="login" style="color: red;">我的订单</a>
            <a href="/" class="indexHeadTextA" v-if="login" @click="quit">退出</a>
        </div>
    </div>
    <hr style="margin-top: 40px;">
    <div class="Text" style="margin-left: 200px">
        <el-table
                ref="multipleTable"
                :data="order"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="订单号"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="totalCount"
                    label="总数量"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="totalAmount"
                    label="总价格"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="创建时间"
                    width="200">
            </el-table-column>
            <el-table-column label="订单状态" width="200">
                <template slot-scope="scope">
                    <span v-if="scope.row.status === 0">待处理</span>
                    <span v-else-if="scope.row.status === 1">已确认</span>
                    <span v-else-if="scope.row.status === 2">配送中</span>
                    <span v-else-if="scope.row.status === 3">已签收</span>
                    <span v-else-if="scope.row.status === 4">已取消</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="viewDetails(scope.row.id)">查看详情</el-button>
                </template>
            </el-table-column>
        </el-table>
<!--        订单详细-->
        <el-dialog
                title="订单详细"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
            <div v-for="(book, index) in orderbookList" :key="book.name">
                <span>图书名称：{{book.name}}，</span>
                <br>
                <span>图书价格：{{book.price}}，</span>
                <br>
                <span>图书数量：{{numberList[index]}}</span>
                <br>
            </div>
            <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="handleConfirm">确 定</el-button>
            </span>
        </el-dialog>
<!--        分页-->
        <el-pagination
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pageSize"
                :total="total">
        </el-pagination>
        <div style="margin-top: 20px">
<!--            <el-button type="danger" round @click="buy">点击购买</el-button>-->
<!--            <el-button type="danger" round @click="deleteByid">点击删除</el-button>-->
<!--            <el-button @click="toggleSelection()">取消选择</el-button>-->
        </div>
    </div>
</div>
</body>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            order:[],
            multipleSelection: [],
            currentPage: 1,
            pageSize: 10, // 初始每页显示条数
            total: 10/* 总条数，可以根据实际情况进行设置 */,
            login:false,
            login_username:'',
            //订单详细开关
            dialogVisible: false,
            orderText:'123',
            orderbookList:[],
            numberList:[],
        },
        computed:{
            filteredData() {
                // 根据 currentPage 和 pageSize 对数据进行分页
                const startIndex = (this.currentPage - 1) * this.pageSize;
                const endIndex = startIndex + this.pageSize;
                return this.tableData.slice(startIndex, endIndex);
            }
        },
        methods:{
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(this.multipleSelection)
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleCurrentChange(val) {
                // 当页码变化时更新 currentPage，并根据需要重新获取数据
                this.currentPage = val;
                // 根据 currentPage 获取新数据，例如从后端获取数据
                // this.fetchData();
                console.log(this.currentPage);
                this.search();
            },
            //判断登录状态
            checkLogin(){
                let token = sessionStorage.getItem("Linusername");
                return token !== null && token !== undefined;
            },
            //退出登录状态的事件
            quit(event){
                event.preventDefault();
                // 执行自定义逻辑
                alert("退出成功！")
                sessionStorage.removeItem("Linusername");
                location.href ="/index";
            },
            search(){
                _this = this;
                // 发起 GET 请求，并传入用户名称参数
                axios.get("http://localhost:8081/order", {
                    params: {
                        username: _this.login_username,
                        //当前页数
                        currentPage:_this.currentPage,
                        pageSize:_this.pageSize
                    }
                }).then(function (response) {
                    // 请求成功处理
                    console.log(response.data); // 响应数据
                    _this.order = response.data.orders;
                    _this.total = response.data.size;
                    console.log("订单内容为：")
                    console.log(_this.order)
                }).catch(function (error) {
                        // 请求失败处理
                        alert(error);
                    });
            },
            //点击查看详细 展现数据
            viewDetails(id){
                console.log(id);
                _this = this;
                // 发起 GET 请求，并传入用户名称参数
                axios.get("http://localhost:8081/orderitem", {
                    params: {
                        orderId: id
                    }
                }).then(function (response) {
                    // 请求成功处理
                    _this.numberList = response.data.number;
                    _this.orderbookList = response.data.book;
                    console.log("书和数量的对象是")
                    console.log(_this.numberList); // 响应数据
                    console.log(_this.orderbookList); // 响应数据
                    _this.dialogVisible = true;
                }).catch(function (error) {
                    // 请求失败处理
                    alert(error);
                });
            },
            handleConfirm(){
                this.dialogVisible = false; // 关闭对话框
                // this.orderbookList = []; // 清空订单书籍列表
                // this.numberList = [];
                // alert("数据已清空")
                // location.reload();
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            }
        },
        mounted() {
            //判断登陆状态 首先获取名为"Linusername"的会话存储数据
            if (this.checkLogin()){
                this.login = true
                this.login_username = sessionStorage.getItem("Linusername")
            }
            this.search();
        },
    })
</script>
</html>